
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>图片验证</title>
    <link rel="stylesheet" th:href="@{/static/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/static/css/component/imageValidate.css}">
    <link rel="stylesheet" th:href="@{/static/fontawesome/css/all.css}">
    <script th:src="@{/static/js/jquery-3.4.0.min.js}"></script>

<!--    <script src="../static/js/jquery-3.4.0.min.js"></script>-->
<!--    <link rel="stylesheet" href="../static/css/bootstrap.min.css">-->
<!--    <link rel="stylesheet" href="../static/css/component/imageValidate.css">-->
<!--    <link rel="stylesheet" href="../static/fontawesome/css/all.css">-->
</head>

<body>
    <div id="container">
        <div class="imageDiv">
            <img id="validateImage" src=""/>
            <img id="slideImage" src=""/>
        </div>
        <div class="resultDiv">
            <button class="btn btn-success" onclick="exchange();"><i class="fas fa-redo"></i>&nbsp;换一组</button>
            <span id="operateResult"></span>
        </div>
        <div>
            <div id="sliderOuter">
                <div id="dragDiv">拖动滑块完成拼图</div>
                <div id="sliderInner">
                    <i class="fas fa-angle-double-right"></i>
                    <div class="coverIcon"></div>
                </div>
            </div>
        </div>
    </div>

</body>
<script th:inline="javascript">
    var telephone = [[telephone]];
    console.log(telephone)
    var left = 0;

    $(function(){
        // 初始化图片验证码
        initImageValidate();

        /* 初始化按钮拖动事件 */
        // 鼠标点击事件
        $("#sliderInner").mousedown(function(){
            // 鼠标移动事件
            document.onmousemove = function(ev) {
                left = ev.clientX;
                if(left >= 67 && left <= 563){
                    $("#sliderInner").css("left",(left-67)+"px");
                    $("#slideImage").css("left",(left-67)+"px");
                }
            };
            // 鼠标松开事件
            document.onmouseup=function(){
                document.onmousemove=null;
                checkImageValidate();
            };
        });

    });

    function initImageValidate(){
        $.ajax({
            async : false,
            type : "POST",
            url : "http://localhost:88/api/proprietary/util/createImgValidate",
            dataType: "json",
            data:{
                telephone:telephone
            },
            success : function(data) {
                if(data.code == 0){
                    // 设置图片的src属性
                    console.log(data.data.oriCopyImage)
                    $("#validateImage").attr("src", "data:image/png;base64,"+data.data.oriCopyImage);
                    $("#slideImage").attr("src", "data:image/png;base64,"+data.data.newImage);
                }else{
                    // layer.open({
                    //     icon:2,
                    //     title: "温馨提示",
                    //     content: data.info
                    // });
                }
            },
            error : function() {}
        });
    }

    function exchange(){
        initImageValidate();
    }

    // 校验
    function checkImageValidate(){
        $.ajax({
            async : false,
            type : "POST",
            url : "http://localhost:88/api/proprietary/util/checkImgValidate",
            dataType: "json",
            data:{
                telephone:telephone,
                offsetHorizontal:left
            },
            success : function(data) {
                if(data.code == 0){
                    console.log(data);
                    $("#operateResult").html(data.info).css("color","#28a745");
                    // 校验通过，调用发送短信的函数
                    //parent.getValidateCode(left);
                }else{
                    console.log(data)
                    $("#operateResult").html(data.info).css("color","#dc3545");
                    // 验证未通过，将按钮和拼图恢复至原位置
                    $("#sliderInner").animate({"left":"0px"},200);
                    $("#slideImage").animate({"left":"0px"},200);
                }
            },
            error : function() {}
        });
    }
</script>

</html>